<!--
 * @Description: 接口管理-列表
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-09-23
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-09-26
-->
<script lang="ts" setup>
  import { PlusOutlined } from '@ant-design/icons-vue'
  import { message, Modal } from 'ant-design-vue'
  import { onMounted, reactive } from 'vue'

  import { requestDelInterface, requestInterfaceList } from '/@/api/system/ysys-user/interface'
  import { InterfaceTypeDesc, InterfaceTypeEnum } from '/@/api/system/ysys-user/interface/enum'
  import { HttpCodeEnum } from '/@/enums/httpEnum'
  import { useQueryPagination } from '/@/hooks/useQueryPagination'

  import GroupAdd from './components/GroupAdd.vue'
  import GroupEdit from './components/GroupEdit.vue'
  import InterfaceAdd from './components/InterfaceAdd.vue'
  import InterfaceEdit from './components/InterfaceEdit.vue'

  /** 搜索条件 */
  const searchParam = reactive<InterfaceListTypes.IRequest>({})

  /** 表格列配置 */
  const columns = [
    { title: '名称', dataIndex: 'interfaceName' },
    { title: '接口地址', dataIndex: 'interfaceUri' },
    { title: '类型', dataIndex: 'interfaceType', customRender: ({ record }) => InterfaceTypeDesc[record.interfaceType] },
    { title: '操作', key: 'action' },
  ]

  const { loading, queryList, dataList, pagination, onPaginationChange, setQueryListCallback } = useQueryPagination<InterfaceListTypes.IRequest, InterfaceListTypes.IResponse[]>(searchParam, requestInterfaceList)

  onMounted(() => {
    setQueryListCallback(deepSetKey)
    initData(1)
  })

  /**
   * 初始化数据
   * @param pageNum 当前页
   */
  const initData = async (pageNum?: number) => {
    if (!pageNum) await queryList()
    else await queryList({ current: pageNum })
  }

  /**
   * 递归设置数据源的key（a-table展开/收缩时需要）
   * @param childrens 子数据
   */
  const deepSetKey = (childrens: InterfaceListTypes.IResponse[]) => {
    childrens.map((item: InterfaceListTypes.IResponse & { key: number }) => {
      const { interfaceId, children } = item
      item.key = interfaceId
      if (children?.length > 0) deepSetKey(children)
    })
  }

  /** 新增分组弹窗 */
  const modalGroupAdd = reactive({
    visible: false,
    pId: NaN,
    pName: '',
    success: () => initData(),
  })

  /**
   * 新增分组
   * @param pId 父id
   * @param pName 父名称
   */
  const addGroup = (pId: number, pName: string) => {
    modalGroupAdd.visible = true
    modalGroupAdd.pId = pId
    modalGroupAdd.pName = pName
  }

  /** 新增接口弹窗 */
  const modalInterfaceAdd = reactive({
    visible: false,
    pId: NaN,
    pName: '',
    success: () => initData(),
  })

  /**
   * 新增接口
   * @param pId 父id
   * @param pName 父名称
   */
  const addInterface = (pId: number, pName: string) => {
    modalInterfaceAdd.visible = true
    modalInterfaceAdd.pId = pId
    modalInterfaceAdd.pName = pName
  }

  /** 编辑分组弹窗 */
  const modalGroupEdit = reactive({
    visible: false,
    interfaceId: NaN,
    success: () => initData(),
  })

  /**
   * 编辑分组
   * @param interfaceId 接口id
   */
  const editGroup = (interfaceId: number) => {
    modalGroupEdit.visible = true
    modalGroupEdit.interfaceId = interfaceId
  }

  /** 编辑接口弹窗 */
  const modalInterfaceEdit = reactive({
    visible: false,
    interfaceId: NaN,
    success: () => initData(),
  })

  /**
   * 编辑接口
   * @param interfaceId 接口id
   */
  const editInterface = (interfaceId: number) => {
    modalInterfaceEdit.visible = true
    modalInterfaceEdit.interfaceId = interfaceId
  }

  /**
   * 删除
   * @param interfaceId 接口id
   */
  const dele = (interfaceId: number) => {
    Modal.confirm({
      title: '删除',
      content: '确定删除该接口吗？',
      onOk: async () => {
        const { responseCode } = await requestDelInterface({ interfaceId })
        if (responseCode === HttpCodeEnum.SUCCESS) {
          message.success('删除成功')
          initData()
        }
      },
    })
  }
</script>

<template>
  <div class="ssc-list interface-list">
    <div class="ssc-table">
      <div class="ssc-table-header">
        <span class="ssc-table-header-title">接口管理</span>
        <a-button type="primary" @click="addGroup(NaN, '')">
          <template #icon><plus-outlined :style="{ 'font-weight': 'bold' }" /></template>
          新建
        </a-button>
      </div>
      <a-table :columns="columns" :data-source="dataList" :loading="loading" :pagination="pagination" @change="onPaginationChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <span>
              <template v-if="record.interfaceType === InterfaceTypeEnum.GROUP">
                <a @click="addGroup(record.interfaceId, record.interfaceName)">添加分组</a>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.interfaceType === InterfaceTypeEnum.GROUP">
                <a @click="addInterface(record.interfaceId, record.interfaceName)">添加接口</a>
                <a-divider type="vertical" />
              </template>
              <template v-if="record.interfaceType === InterfaceTypeEnum.GROUP">
                <a @click="editGroup(record.interfaceId)">编辑</a>
              </template>
              <template v-else-if="record.interfaceType === InterfaceTypeEnum.INTERFACE">
                <a @click="editInterface(record.interfaceId)">编辑</a>
              </template>
              <template v-if="record.children.length === 0">
                <a-divider type="vertical" />
                <a class="color-error" @click="dele(record.interfaceId)">删除</a>
              </template>
            </span>
          </template>
        </template>
      </a-table>
    </div>
    <div class="modal">
      <GroupAdd v-model:visible="modalGroupAdd.visible" :p-id="modalGroupAdd.pId" :p-name="modalGroupAdd.pName" @success="modalGroupAdd.success" />
      <InterfaceAdd v-model:visible="modalInterfaceAdd.visible" :p-id="modalInterfaceAdd.pId" :p-name="modalInterfaceAdd.pName" @success="modalInterfaceAdd.success" />
      <GroupEdit v-model:visible="modalGroupEdit.visible" :interface-id="modalGroupEdit.interfaceId" @success="modalGroupEdit.success" />
      <InterfaceEdit v-model:visible="modalInterfaceEdit.visible" :interface-id="modalInterfaceEdit.interfaceId" @success="modalInterfaceEdit.success" />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .color-error {
    color: @error-color;
  }
</style>
